<template>
<!-- 单品 -->
     <div id="single_item">
        <van-nav-bar title="休闲型男灰色衬衫" left-text="返回" left-arrow
              @click-left="onClickLeft"
             @click-right="onClickRight"
        >
        <template #right>
            <van-icon name="ellipsis" size="18" />
        </template>
        </van-nav-bar>
        <div class="item_img">
            <img src="../assets/images/单品/单品_02.png" alt="">
            <img class="xing" src="../assets/images/单品/xing_03.png" alt="">
            <router-link to='/'>
                 <img class="button" src="../assets/images/个人中心/button.png" alt="">
            </router-link>
            <router-link to='/SHOPPING'>
                 <img class="shopping_car" src="../assets/images/单品/单品_03.png" alt="">
            </router-link>
        </div>
        <!-- 商品评价 -->
        <div class="content"> 
            <div class="conter">
                <p class="evaluate">商品评价<span>(200)</span></p>
                <p class="portrait"><img src="../assets/images/我的粉丝&我的代言费/fans.png" alt="">
                &nbsp;<span>董大伟</span></p>
                <p class="portrait">产品不错，衣服尺寸很合适，下次还会再来！</p>
                <p class="images"><img src="../assets/images/全部评价/pic_01.png" alt="">
                    <img src="../assets/images/全部评价/pic_02.png" alt="">
                    <img src="../assets/images/全部评价/pic_03.png" alt="">
                </p>
                <p class="quality top">产品质量：
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                </p>
            <p class="quality">服务态度：
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
            </p>
                <p class="quality">尺寸合适：
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                </p>
            </div>
            <div class="conter">
                <p class="evaluate">商品评价<span>(200)</span></p>
                <p class="portrait"><img src="../assets/images/我的粉丝&我的代言费/fans.png" alt="">
                &nbsp;<span>董大伟</span></p>
                <p class="portrait">产品不错，衣服尺寸很合适，下次还会再来！</p>
                <p class="images"><img src="../assets/images/全部评价/pic_01.png" alt="">
                    <img src="../assets/images/全部评价/pic_02.png" alt="">
                    <img src="../assets/images/全部评价/pic_03.png" alt="">
                </p>
                <p class="quality top">产品质量：
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                </p>
            <p class="quality">服务态度：
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
            </p>
                <p class="quality">尺寸合适：
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                    <img src="../assets/images/全部评价/icon_01.png" alt="">
                </p>
            </div>
            <!-- 查看全部评价 -->
            <router-link to="/AllEvaluate">
                <div class="ckpj">
                    <p >查看全部评价</p>
                </div>
            </router-link>
       </div>
        <div class="footer">
            <p  class="footer_header" >解析面料 / fabric </p><hr >
            <img class="twxx" src="../assets\images\单品-图文信息\单品－图文信息_02.png" alt="">
           <div class="gry">
                <p ><span>品质细节 DETAILS</span></p>
            </div>
        </div>
      
        <!-- 商品价格 -->
        <div class="introduce">
            <p>悠闲型男灰色衬衫</p>
            <p>Sportsman leisure suit</p>
            <p class="price">￥<span> 899.00</span> </p>
        </div>
    </div>
</template>

<script>
export default {
    name:"Single_item",
    data(){
        return{
        }
    },
     methods: {
    onClickLeft() {
      
      this.$router.go(-1)
    },
    onClickRight() {
      
    },
  },
}
</script>

<style lang="less">
    #single_item{
        background:#f9f9f9;
    }
    .item_img{
        width:100%;
        position: relative;
        .xing{
            width:40px;
            position: absolute;
            right:42px;
            top:5%;
        }
         .button{
            width:94px;
            position: fixed;
            left:38px;
            top:10%;
            border-radius: 50%;
        }
        .shopping_car{
            width:126px;
            position: fixed;
            right:38px;
            bottom:13%;
            border-radius: 50%;
        }
    }
    .item_img img{
        width:100%;
     margin-top:100px;
    }
    //商品评价
    .content{
        width:100%;
        background:#fff;
    }
    .conter{
         background:#fff;
        margin-top:30px;
       padding-left:30px;
    }
    .evaluate{
        font-size:28px;
        color:#4e4e4e;
        span{
            color:#999;
        }
    }
    .portrait{
        margin-top:34px;
        font-size:34px;
        color:#4e4e4e;
        img{
            width:60px;
            border-radius: 50%;
        }
    }
    .images{
        img{
            width:110px;
            margin-top:24px;
        }
    }
    .quality{
        font-size:18px;
        color:#4e4e4e;
        img{
            width:18px;
        };
    }
    .top{
        margin-top:22px;
    }
    //查看评价
    .ckpj{
        height:166px!important;
        padding-top:66px;
        p{
        width:208px;
        height:55px;
        border:1px solid #c7c7c7;
        color:#e42f45;
        font-size:22px;
        text-align:center;
        line-height:50px;
        border-radius:25px;
        margin:0 auto;
        }
      
    }
    .footer{
        width:100%;
        height:464px;
        background:#fff;
        margin-top:20px;
        
    }
    .footer_header{
        float:left;
        font-size:16px;
        color:#181818;
    }
    hr{
        width:70%;
        float:right;
        border-bottom:none;
        margin-top:28px;
    };
    .twxx{
        height:367px;
    }

    .gry{
        background:#898989;
        margin-top:8px;
        p{
        transform:scale(0.7);
        margin-right:63%;
        line-height:34px;
        }

        span{
            font-size:8px;
            color:#fff;

        }
    }
    // 商品价格 
    .introduce{
        height:200px;
        margin:0 auto;
        margin-top:14px;
        background:#fff;
        padding-top:40px;
        p{
            text-align:center;
            font-size:33px;
            color:#333;
            line-height:45px;

        }
        .price{
            font-size:30px!important;
            color:#ff4242!important;
        }
    }
</style>
